<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>用户列表管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- <script src="../../../resources/static/js/common.js"></script>-->
    <script src="../../../resources/static/commomsjs/commons.js"></script>
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../../../resources/static/manageWeb/css/font.css">
    <link rel="stylesheet" href="../../../resources/static/manageWeb/css/index.css">
    <script src="../../../resources/static/manageWeb/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../../resources/static/manageWeb/js/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>
<body>
<div id="app">
    <div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>导航元素</cite></a>
          </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
    </div>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-inline layui-show-xs-block" >
                        <select v-model="searchIndustryId" name="cateid" class="layui-select">
                            <option value="0">全部行业</option>
                            <option v-for="industry in industrys" :value="industry.id" >{{industry.industryName}}</option>
                        </select>
                    </div>
                    <div class="layui-inline layui-show-xs-block">
                        <input v-model="searchUserAccount" type="text" placeholder="用户名查询...." class="layui-input">
                    </div>
                    <div class="layui-inline layui-show-xs-block">
                        <input class="layui-btn" name="sub" @click="initUserinfos(1)" value="查询" type="button">
                    </div>
                    <div class="layui-card-body ">
                    </div>
                    <div class="layui-card-header">
                        <button id="batchDel" class="layui-btn layui-btn-danger" @click.prevent="batchDelete"><i class="layui-icon"></i>批量删除</button>
                    </div>
                    <div class="layui-card-body ">
                        <table class="layui-table">

                            <thead>
                            <tr>
                                <th><input  type="checkbox" >全选</th>
                                <th>ID</th>
                                <th>用户头像</th>
                                <th>用户名</th>
                                <th>联系方式</th>
                                <th>邮箱</th>
                                <th>QQ</th>
                                <th>微信</th>
                                <th>支付宝</th>
                                <th>查看/操作</th>
                            </thead>
                            <tbody>
                            <tr v-for="userinfo,index in userinfos">
                                <td>
                                    <input type="checkbox">
                                </td>
                                <td>{{userinfo.id}}</td>
                                <td>
                                    <img :src="path+'manageWeb/images/'+userinfo.picture" style="width: 30px;height: 30px;"/>
                                </td>
                                <td>{{userinfo.userAccount}}</td>
                                <td>{{userinfo.userPhone}}</td>
                                <td>{{userinfo.email}}</td>
                                <td>{{userinfo.qq}}</td>
                                <td>{{userinfo.wechat}}</td>
                                <td>{{userinfo.pay}}</td>
                                <td class="td-manage">
                                    <a title="查看/编辑"  :href="`userinfoLookManage.html?id=${userinfo.id}`">
                                        <i class="layui-icon">&#xe642;</i>
                                    </a>
                                    <a title="删除"  @click="delUserinfo(userinfo.id,index)" href="#">
                                        <i class="layui-icon">&#xe640;</i>
                                    </a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="layui-card-body ">
                        <div class="page">
                            <div>
                                <a v-for="i in page.navigatepageNums" href="#" @click="initUserinfos(i)" >{{i}}</a><!--:class="{'current':page.pageNum==i}"-->
                                {{page.pageNum}}/{{page.pages}}页
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>

    var app=new Vue({
        el:'#app',
        data:{
            industrys:[],
            path:"http://localhost:8080/",
            userinfos:[],
            searchIndustryId:0,
            searchUserAccount:'',
            page:null,
            searchUserinfo:{industry:{id:0},userAccount:''}
        },
        created:function(){
            this.initIndustrys();
            this.initUserinfos(1);
        },
        watch:{
            allChoose:function(){
                if(this.allChoose){
                    this.userinfos.forEach(
                        userinfo=>{
                            this.choosedUserinfoIds.push(userinfo.id);
                        });
                }
                else{
                    this.choosedUserinfoIds=[];
                }
            }
        },
        methods:{
            batchDelete:function(){
                if(this.choosedUserinfoIds.length==0){
                    return;
                }
                if(!window.confirm("你确认要删除吗？")){
                    return;
                }
                axios.post(path+"manage/batchDelete",this.choosedUserinfoIds).then(
                    res=>{
                        //只保留没有删除 filter把符合条件的留下
                        this.userinfoIds=this.userinfos.filter(
                            userinfo=>{
                                if(!this.choosedUserinfoIds.includes(userinfo.id)){
                                    return userinfo;
                                }
                            }
                        );
                    });
            },
            delUserinfo:function(id,index){
                if(!window.confirm("你确认要删除吗？")){
                    return;
                }
                axios.get("http://localhost:8080/manage/delUserinfo?id=" + id)
                    .then(res => {
                        this.userinfos.splice(index,1);
                        layer.msg('已删除!', {icon: 1, time: 1000});
                    });
            },
            initIndustrys:function(){
                axios.get(this.path+"manage/selectIndustryList")
                    .then(res=>{
                        this.industrys=res.data.data;
                    })
            },
            initUserinfos:function(pageNum){
                var data={
                    industry:{id:null},
                    userAccount:null
                };
                if(this.searchIndustryId!=0){
                    data.industry.id=this.searchIndustryId;
                }
                if(this.searchUserAccount!=""){
                    data.userAccount=this.searchUserAccount;
                }
                axios.post(this.path+"manage/selectUserinfoList?pageNum="+pageNum,data)
                    .then(res=>{
                        this.userinfos=res.data.data;
                        this.userinfos=res.data.data.list;
                        this.page=res.data.data;
                    });
            }

        }
    })

</script>

</html>